import { Col, message, Row, Spin } from 'antd';
import { connect } from 'umi';
import { AnnounceManageAPI } from '../common/type';
import { DetailLeftView } from './DetailLeftView';
import { DetailRightView } from './DetailRightView';
import '../common/styles.less';
import { useEffect, useState } from 'react';
import { getAnnounceByIDService } from '../service';
import { AnnounceDetailContext } from '../common/UpdateContext';

const DetailView: React.FC<AnnounceManageAPI.IDetailView> = ({
  curRes,
  locationProps,
}) => {
  const prefixCls = 'announce-update-';

  const [announceInfo, setAnnounceInfo] = useState<any>();

  /**
   * 获取数据详情
   * @param res
   */
  const getAnnounceByIDCall = (res: any) => {
    if (res && res?.msgFlag) {
      setAnnounceInfo(res?.obj);
    } else {
      message.error(res?.msg);
    }
  };

  const { getAnnounceInfoRun, getAnnounceLoading } = getAnnounceByIDService(
    getAnnounceByIDCall,
  );

  useEffect(() => {
    if (locationProps?.state?.id) {
      let infoPayload = {
        ...locationProps?.state,
      };
      getAnnounceInfoRun(infoPayload);
    }
  }, [locationProps?.state]);

  /**
   * 刷新详情
   */
  const reloadAnnounceInfo = () => {
    let infoPayload = {
      ...locationProps?.state,
    };
    getAnnounceInfoRun(infoPayload);
  };

  return (
    <>
      <AnnounceDetailContext.Provider
        value={{
          prefixCls,
          curRes,
          announceInfo,
          locationProps,
          announceLoading: getAnnounceLoading,
          reloadAnnounceInfo,
        }}
      >
        <Spin spinning={getAnnounceLoading}>
          <Row className={prefixCls + 'row'} gutter={[8, 8]}>
            <Col span={16} className={prefixCls + 'row-col'}>
              <DetailLeftView />
            </Col>
            <Col span={8} className={prefixCls + 'row-col'}>
              <DetailRightView />
            </Col>
          </Row>
        </Spin>
      </AnnounceDetailContext.Provider>
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(DetailView);
